<template>
	<div class="layout-padding">
		<splitpanes>
			<pane size="15">
				<div class="layout-padding-auto layout-padding-view">
					<el-scrollbar>
						<el-tree
							:data="treeData.list"
							:props="treeData.defaultProps"
							@node-click="handleNodeClick"
							:default-expand-all="true"
							:highlight-current="true"
							:expand-on-click-node="false"
						/>
					</el-scrollbar>
				</div>
			</pane>
			<pane class="ml8">
				<div class="layout-padding-auto layout-padding-view">
					<el-row>
						<div class="mb8" style="width: 100%">
							<el-switch
								v-model="switcher"
								class="ml-2"
								inline-prompt
								style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc"
								active-text="自动刷新已打开"
								inactive-text="自动刷新已关闭"
								@change="handleSwitch"
							/>
						</div>
					</el-row>
					<el-table :data="dataList" border>
						<el-table-column type="index" label="序号" width="60" fixed="left" />
						<el-table-column prop="siteName" label="站点名称" show-overflow-tooltip fixed="left" width="120" />
						<el-table-column prop="recordTime" label="记录时间" show-overflow-tooltip fixed="left" width="160" />
						<el-table-column prop="pm25" label="PM2.5(μg/m³)" show-overflow-tooltip width="120">
							<template #default="scope">
								<el-tag
									effect="dark"
									size="small"
									class="w-full !text-[#000]"
									:color="getLevel(m_CurrentTypeIndicator_list[0].name, scope.row.pm25)?.color"
									>{{ scope.row.pm25 }}</el-tag
								>
							</template>
						</el-table-column>
						<el-table-column prop="pm10" label="PM10(μg/m³)" show-overflow-tooltip width="120">
							<template #default="scope">
								<el-tag
									effect="dark"
									size="small"
									class="w-full !text-[#000]"
									:color="getLevel(m_CurrentTypeIndicator_list[1].name, scope.row.pm10)?.color"
									>{{ scope.row.pm10 }}</el-tag
								>
							</template>
						</el-table-column>
						<el-table-column prop="co" label="CO(mg/m³)" show-overflow-tooltip width="120">
							<template #default="scope">
								<el-tag
									effect="dark"
									size="small"
									class="w-full !text-[#000]"
									:color="getLevel(m_CurrentTypeIndicator_list[5].name, scope.row.co)?.color"
									>{{ scope.row.co }}</el-tag
								>
							</template>
						</el-table-column>
						<el-table-column prop="so2" label="SO2(μg/m³)" show-overflow-tooltip width="120">
							<template #default="scope">
								<el-tag
									effect="dark"
									size="small"
									class="w-full !text-[#000]"
									:color="getLevel(m_CurrentTypeIndicator_list[2].name, scope.row.so2)?.color"
									>{{ scope.row.so2 }}</el-tag
								>
							</template>
						</el-table-column>
						<el-table-column prop="no2" label="NO2(μg/m³)" show-overflow-tooltip width="120">
							<template #default="scope">
								<el-tag
									effect="dark"
									size="small"
									class="w-full !text-[#000]"
									:color="getLevel(m_CurrentTypeIndicator_list[3].name, scope.row.no2)?.color"
									>{{ scope.row.no2 }}</el-tag
								>
							</template>
						</el-table-column>
						<el-table-column prop="o3" label="O3(μg/m³)" show-overflow-tooltip width="120">
							<template #default="scope">
								<el-tag
									effect="dark"
									size="small"
									class="w-full !text-[#000]"
									:color="getLevel(m_CurrentTypeIndicator_list[4].name, scope.row.o3)?.color"
									>{{ scope.row.o3 }}</el-tag
								>
							</template>
						</el-table-column>
						<el-table-column prop="ext01" label="VOCs(ppm)" show-overflow-tooltip width="120" />
						<el-table-column prop="temperature" label="温度(℃)" show-overflow-tooltip width="120" />
						<el-table-column prop="humidity" label="湿度(%RH)" show-overflow-tooltip width="120" />
						<el-table-column prop="windSpeed" label="风速(m/s)" show-overflow-tooltip width="120" />
						<el-table-column prop="windDirection" label="风向(°)" show-overflow-tooltip width="120" />
						<el-table-column prop="atmosphericPressure" label="气压(kPa)" show-overflow-tooltip width="120" />
						<el-table-column prop="primary" label="首要污染物" show-overflow-tooltip width="120" />
					</el-table>
				</div>
			</pane>
		</splitpanes>
	</div>
</template>

<script setup lang="ts" name="systemAirRealTimeData">
import { fetchList } from '/@/api/platform/airRealTimeData';
import { fetchAreaList as fetchTreeList } from '/@/api/platform/codeArea';
import { handleTree } from '/@/utils/other';
import { getAQILimit, level, m_CurrentTypeIndicator_list } from '/@/views/platform/airRealTimeDataMap/data';

// 引入组件
const switcher = ref(true);
// 定义查询字典

// 定义变量内容
const areaInfo = ref({});
const siteId = ref();
// 搜索变量
const dataList = ref([]);

// 区域树使用的数据
const treeData = reactive({
	list: [],
	defaultProps: {
		label: 'name',
	},
});
// 点击树
const handleNodeClick = (e: any) => {
	siteId.value = e.id;
	areaInfo.value = e;
	getDataList();
};
function getDataList() {
	fetchList({ siteId: siteId.value }).then((res) => {
		dataList.value = res.data;
	});
}
const getTreeDate = async () => {
	await fetchTreeList().then((res: any) => {
		const records = res.data;
		if (records.length) {
			treeData.list = handleTree(records, 'id', 'pid', 'children', '1111111111111111111');
			siteId.value = treeData.list[0]?.id;
			getDataList();
		}
	});
};
// 定时刷新
let timer: any;
const handleSwitch = (val: boolean) => {
	if (val) {
		timer = setInterval(() => {
			getDataList();
		}, 30 * 1000);
	} else {
		clearInterval(timer);
	}
};

// 污染等级
const getLevel = (factor: string, value: number) => {
	const l = getAQILimit(factor, value);
	const item = level.find((_, index: number) => {
		return index === l;
	});
	return item;
};
onMounted(() => {
	getTreeDate();
	handleSwitch(true);
});
onUnmounted(() => {
	clearInterval(timer);
});
</script>
<style lang="scss" scoped>
:deep(.el-tag) {
	border: none;
}
</style>
